﻿@using MyWebProject.Models.QueryResult;
<!--start-banner-->
<div class="banner">
    <div class="container">
        <section class="slider">
            <div class="flexslider">
                <ul class="slides">
                    @{  HomeResult homeResult = Model as HomeResult;
                        foreach (SnippetResult snippets in homeResult.top3PostResults)
                        {
                            <li>
                                <div class="banner-top">
                                    <h1>@snippets.MAIN_TITLE</h1>
                                    <h2>@snippets.SECOND_TITLE</h2>
                                    <p>@Html.Raw(System.Web.HttpUtility.HtmlDecode(snippets.POST_CONTENT))</p>
                                    <div class="bnr-btn">
                                        <a href="#" class="hvr-shutter-out-horizontal" onclick="getDetial('@snippets.POST_ID')">查看</a>
                                    </div>
                                </div>
                            </li>}
                    }
                </ul>
            </div>
        </section>
    </div>
</div>
<!--end-banner-->
<!--FlexSlider-->
<link rel="stylesheet" href="~/Content/css/flexslider.css" type="text/css" media="screen" />
<script defer src="~/Content/js/jquery.flexslider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.flexslider').flexslider({
            animation: "slide",
            start: function (slider) {
                $('body').removeClass('loading');
            }
        });
    });
</script>
<!--End-slider-script-->
<!--start-provide-->
<div class="provide">
    @{
        string[] strs = { "provide-one", "provide-two", "provide-tre", "provide-four" };
        for (int i = 0; i < homeResult.msgBoards.Count; i++)
        {
            <a href="javascript:void(0)" onclick="getDetial('@homeResult.msgBoards[i].POST_ID')">
                <div class="col-md-3 provide-left @strs[i]" style="height:150px">
                    <h4 style="color:#ffffff">@homeResult.msgBoards[i].MAIN_TITLE</h4>
                    <h3 style="color:rgba(0, 38, 128, 0.72)">@homeResult.msgBoards[i].NICK_NAME <span class="badge badge-info" style="float:right">@homeResult.msgBoards[i].replyCount</span></h3>
                    <p>
                        @Html.Raw(System.Web.HttpUtility.UrlDecode(homeResult.msgBoards[i].TEXT))
                    </p>
                </div>
            </a>
        }
        if (homeResult.msgBoards.Count < 4)
        {
            for (int j = homeResult.msgBoards.Count; j < 4; j++)
            {
                <a href="javascript:void(0)">
                    <div class="col-md-3 provide-left @strs[j]" style="height:150px">
                        <h4 style="color:#ffffff">预留</h4>
                        <h3 style="color:rgba(0, 38, 128, 0.72)">预留<span class="badge badge-info" style="float:right">1</span></h3>
                        <p>预留</p>
                    </div>
                </a>
}
        }

    }
    <div class="clearfix"></div>
</div>
<!--end-provide-->
<!--start-welcome-->
<div class="welcome">
    <div class="container">
        <div class="welcome-top">
            @{    foreach (SnippetResult sr in homeResult.top2PostResults)
                {
                    if (sr == null)
                    {
                        <div class="welcome-top">
                            <div class="col-md-6 welcome-left">
                            </div>
                        </div>continue;
                    }
                    <div class="col-md-6 welcome-left">
                        <h3>@sr.MAIN_TITLE</h3>
                        <h4>@sr.SECOND_TITLE</h4>
                        <p>@Html.Raw(System.Web.HttpUtility.HtmlDecode(sr.POST_CONTENT))</p>
                        <div class="w-btn">
                            <a href="#" class="hvr-shutter-out-horizontal" onclick="getDetial('@sr.POST_ID')">查看</a>
                        </div>
                    </div>}
            }
        </div>

        <div class="clearfix"></div>
    </div>
</div>
<!--end-welcome-->
<!--start-join-->
<div class="join">
    <div class="container">
        <div class="join-main">
            <div class="col-md-3 join-left">
                <svg class="icon" aria-hidden="true" style="width:90px;height:90px;" id="icon1" onmouseover="overIcon('icon1')" onmouseout="outIcon('icon1')">
                    <use xlink:href="#icon-Xmas_C-2"></use>
                </svg>
                <h4>Welcome</h4>
                <p>欢迎来到我的主页,如果您有什么好的意见或建议可以给我留言或发邮件</p>
            </div>
            <div class="col-md-3 join-left">
                <svg class="icon" aria-hidden="true" style="width:90px;height:90px">
                    <use xlink:href="#icon-Xmas_C-9"></use>
                </svg>
                <h4>About me</h4>
                <p>野生码农一名,喜欢新科技新技术,爱折腾</p>
            </div>
            <div class="col-md-3 join-left">
                <svg class="icon" aria-hidden="true" style="width:90px;height:90px">
                    <use xlink:href="#icon-Xmas_C-3"></use>
                </svg>
                <h4>Blog</h4>
                <p>目前暂时完成了博客相关功能,可以通过博客浏览网站帖子及留言</p>
            </div>
            <div class="col-md-3 join-left">
                <svg class="icon" aria-hidden="true" style="width:90px;height:90px">
                    <use xlink:href="#icon-Wreath"></use>
                </svg>
                <h4>Next Plan</h4>
                <p>短期内还需要完成管理系统,图片库,关于网站还没有想好需要继续增加些什么功能模块.当然欢迎给我建议</p>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!--end-join-->
<div class="welcome">
    <div div class="container">
        <div class="col-md-6">
            <div class="row" id="MsgBoard"></div>
            <input id="lastReplyId" style="visibility:collapse" value="">
            <div class="row" style="text-align:center">
                <ul class="pagination pagination-sm" id="boardPage"></ul>
            </div>
        </div>
        <div class="col-md-4" style="float:right">
            <div class="row">
                <h2 style="text-align:left;vertical-align:top;margin-top:0;padding-left:20px">留言:</h2>
            </div>
            <form role="form" id="boardForm" style="margin-bottom:10px">
                <input id="avatarUrl" style="display:none" />
                <div class="form-group">
                    <input type="text" class="form-control" id="nickName" placeholder="你的昵称">
                </div>
                <div class="form-group">
                    <textarea class="form-control" id="comment" placeholder="我有话说"></textarea>
                </div>
                <button type="button" class="btn btn-info" onclick="leaveComment('0','0','Home/ConversationMsgBoard')">说完了</button>
            </form>
        </div>
    </div>
</div>

<script>
    function emojiInit() {
        $("#comment").emojioneArea({
            autoHideFilters: true
        });
    }
    window.onload = function BoardBindUserInfo() {
        $("#avatarUrl").val(getAvatar());
        $("#nickName").val(getUserName());
        $("#nickName").attr("placeholder", getUserName());
        emojiInit();
    }

    function getDetial(id) {
        if (id == 0) {
            location.href = "#ConversationBoard";
            return;
        }
        $.post('Blog/DetialDirect', { 'postId': id }, function (data) {
            $("#MiddleContent").html(data);
        });
    }
    //加载矢量图
    function overIcon(elemId) {
        position = $("#" + elemId).position();
        Console.log("position" + position.left + " " + position.top);
        $("#" + elemId).css("width", "100px");
        $("#" + elemId).css("height", "100px");
        $("#" + elemId).css("position", "absolute");
        $("#" + elemId).css("left", parseInt(position.left) - 10 + "px");
        $("#" + elemId).css("top", parseInt(position.top - 10) + "px");
        position = $("#" + elemId).position();
        Console.log("position" + position.left + " " + position.top);
    }
    function outIcon(elemId) {
        //$("#" + elemId).css("width", "90px");
        //$("#" + elemId).css("height", "90px");
    }
    getBoard('', '', '0', 1, 'Home/ConversationMsgBoard');
</script>
